/*
 * @Author: yanyufengqing 1624478125@qq.com
 * @Date: 2025-10-03 16:56:03
 * @LastEditors: yanyufengqing 1624478125@qq.com
 * @LastEditTime: 2025-10-03 17:22:31
 * @FilePath: \manage-system\src\store\theme.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineStore } from 'pinia';
import { mix, setProperty } from '@/utils/index';

/**
 * 主题管理Store
 * 用于管理Element Plus主题色和自定义样式变量
 */
export const useThemeStore = defineStore('theme', {
  /**
   * Store状态定义
   * 存储各种主题颜色和样式变量
   */
  state: () => ({
    primary: '', // 主色调
    success: '', // 成功色
    warning: '', // 警告色
    danger: '', // 危险色
    info: '', // 信息色
    headerBgColor: '', // 头部背景色
    headerTextColor: '', // 头部文字色
  }),

  getters: {},

  /**
   * Store操作方法
   */
  actions: {
    /**
     * 初始化主题 - 从localStorage加载保存的主题设置
     */
    initTheme() {
      // 加载Element Plus主题色
      ['primary', 'success', 'warning', 'danger', 'info'].forEach(type => {
        const color = localStorage.getItem(`theme-${type}` || '');
        if (color) {
          this.setPropertyColor(color, type);
        }
      });

      // 加载自定义头部样式
      const headerBgColor = localStorage.getItem('header-bg-color');
      headerBgColor && this.setHeaderBgColor(headerBgColor);

      const headerTextColor = localStorage.getItem('header-text-color');
      headerTextColor && this.setHeaderTextColor(headerTextColor);
    },

    /**
     * 重置主题 - 清除所有主题设置
     */
    resetTheme() {
      ['primary', 'success', 'warning', 'danger', 'info'].forEach(type => {
        this.setPropertyColor('', type);
      });
    },

    /**
     * 设置属性颜色 - 核心方法，设置主题色并生成相关变量
     * @param color 颜色值
     * @param type 颜色类型（primary/success/warning/danger/info）
     */
    setPropertyColor(color: string, type: string = 'primary') {
      (this as any)[type] = color; // 动态设置state属性
      setProperty(`--el-color-${type}`, color); // 设置CSS变量
      this.setThemeLight(type); // 生成浅色变体
    },

    /**
     * 设置头部背景颜色
     * @param color 背景颜色值
     */
    setHeaderBgColor(color: string) {
      this.headerBgColor = color;
      setProperty('--header-bg-color', color); // 设置CSS变量
      localStorage.setItem(`header-bg-color`, color); // 持久化存储
    },

    /**
     * 设置头部文字颜色
     * @param color 文字颜色值
     */
    setHeaderTextColor(color: string) {
      this.headerTextColor = color;
      setProperty('--header-text-color', color); // 设置CSS变量
      localStorage.setItem(`header-text-color`, color); // 持久化存储
    },

    /**
     * 设置主题浅色变体 - 生成主题色的浅色版本
     * @param type 颜色类型
     */
    setThemeLight(type: string = 'primary') {
      // 生成5种浅色变体（light-3到light-9）
      [3, 5, 7, 8, 9].forEach(v => {
        setProperty(`--el-color-${type}-light-${v}`, mix('#ffffff', (this as any)[type], v / 10));
      });
      // 生成深色变体（dark-2）
      setProperty(`--el-color-${type}-dark-2`, mix('#ffffff', (this as any)[type], 0.2));
    },
  },
});
